<template>
	<loading v-if="0 != loading" :status="loading" />
	<view v-else class="main-view">
		<view class="top-point">
			<!-- <view class="point-icon"></view> -->
			<image src="/static/image/point-icon.png" class="point-icon"></image>
			<view class="point-score">
				<text class="score-text">可用积分</text>
				<view class="score">{{memberUserPoint}}</view>
			</view>
			<view class="score-text" @click="toRecord">我的积分明细 ></view>
		</view>
		<view class="tab-view">
			<view class="tab-title">
				<view class="title-item" v-for="(item, index) in tabList" :key="index" 
					:data-item="item" @tap="changeTab">
					<text :class="tabIndex == item.idx ? 'active-text' : ''">{{item.text}}</text><view class="tab-mark" v-if="tabIndex == item.idx"></view>
				</view>
			</view>
			<view class="tab-point">
				<view class="point-item" v-for="(item, index) in pointRangeList" :key="index" 
					:data-item="item" @tap="changePoint" 
					:style="exchangeType == item.idx ? 'color: #ED171F; background: rgba(255,110,66,0.06)' : ''">{{item.text}}</view>	
			</view>
		</view>
		<!-- 商品 -->
		<view class="goods-list-view" v-if="tabValue == 'goods'">
			<view class="goodslist" v-if="exchangeGoodsList && exchangeGoodsList.length > 0">
				<view class="item" @tap.stop.prevent="goPointGoodsDetail" :data-id="item.id"
					v-for="(item, index) in exchangeGoodsList" :key="item.id">
					<view class="goodsImage">
						<image :src="baseUrl + '/' + item.goodsImages" class="goodsImage"></image>
					</view>
					<view class="goodsName">{{ item.goodsName }}</view>
					<view class="goodsPrice">
						<text class="pointToGoods">{{ item.needPoints }}积分</text>
						<text class="xiahuaPrice" v-if="!util.isEmpty(item.goodsSkuPrice)">¥{{ item.goodsSkuPrice }}</text>
					</view>
				</view>
			</view>
			<view v-if="!pointGoodHaveMore && !util.isEmpty(exchangeGoodsList)" class="haveMore">
				<view class="haveMore-line"></view>
				<view class="txt">没有更多了</view>
				<view class="haveMore-line"></view>
			</view>
			<view class="building-wrap" v-if="util.isEmpty(exchangeGoodsList)">
				<image class="building-img" src="/static/image/home_ic_empty@2x.png"></image>
				<view class="building-tip">商品上架中,敬请期待...</view>
			</view>
		</view>
		<!-- 电子卡券 -->
		<view class="goods-list-view" v-if="tabValue == 'rights'">
			<view class="goodslist" v-if="rightsList && rightsList.length > 0">
				<view class="item" @tap.stop.prevent="goECouponDetail" :data-id="item.id" v-for="(item, index) in rightsList"
					:key="item.id">
					<view class="couponImage">
						<view class="ECoupon-logoView">
							<image :src="util.attachedUrl(item.previewImg, baseUrl)" class="ECoupon-img"></image>
						</view>
					</view>
					<view class="couponName">{{ item.rightsName }}</view>
					<view class="couponPrice">
						<text class="pointTocoupons">{{ item.points }}积分{{item.price && item.price > 0.01 ? ` + ¥${item.price}` : ''}}</text>
					</view>
				</view>
			</view>
			<view class="building-wrap" v-if="util.isEmpty(rightsList)">
				<image class="building-img" src="/static/image/home_ic_empty@2x.png"></image>
				<view class="building-tip">电子卡券上架中,敬请期待...</view>
			</view>
			<view v-if="!ECouponsHaveMore && !util.isEmpty(rightsList)" class="haveMore">
				<view class="haveMore-line"></view>
				<view class="txt">没有更多了</view>
				<view class="haveMore-line"></view>
			</view>
		</view>
		<!-- 商城券 -->
		<view class="goods-list-view" v-if="tabValue == 'mallCoupon'">
			<view class="goodslist" v-if="pointCouponsArr && pointCouponsArr.length > 0">
				<view class="item" @tap.stop.prevent="goPointCouponDetail" :data-id="item.id"
					v-for="(item, index) in pointCouponsArr" :key="item.id">
					<view class="couponImage">
						<view class="couponlogoView">
							<image :src="couponlogo" class="couponlogo"></image>
							<view class="couponDisCoupon">
								<text class="dollar" v-if="'0' == item.discountType">¥</text>
								<text class="price" v-if="'0' == item.discountType">{{ item.offMoney }}</text>
								<text class="price" v-if="'1' == item.discountType">{{ item.discount / 10 }}</text>
								<text class="dollar" v-if="'1' == item.discountType">折</text>
							</view>
							<text class="couponDetail">满{{ util.money(item.fullMoney) }}可用</text>
						</view>
					</view>
					<view class="couponName">{{ item.couponsName }}</view>
					<view class="couponPrice">
						<text class="pointTocoupons">{{ item.needPoints }}积分</text>
					</view>
				</view>
			</view>
			<view class="building-wrap" v-if="util.isEmpty(pointCouponsArr)">
				<image class="building-img" src="/static/image/home_ic_empty@2x.png"></image>
				<view class="building-tip">商城券上架中,敬请期待...</view>
			</view>
			<view v-if="!pointCouppnHaveMore && !util.isEmpty(pointCouponsArr)" class="haveMore">
				<view class="haveMore-line"></view>
				<view class="txt">没有更多了</view>
				<view class="haveMore-line"></view>
			</view>
		</view>
		<!-- 线下券 -->
		<view class="goods-list-view" v-if="tabValue == 'couponOffline'">
			<view class="goodslist" v-if="offlineCoupon && offlineCoupon.length > 0">
				<view class="item" @tap.stop.prevent="goOfflineCouponDetail" :data-couponId="item.couponId"
					:data-exchangeId="item.id" v-for="(item, index) in offlineCoupon" :key="item.id">
					<view class="couponImage">
						<view class="couponlogoView">
							<image :src="couponlogo" class="couponlogo"></image>
							<view class="couponDisCoupon">
								<block v-if="'1' == item.couponType || '3' == item.couponType || '5' == item.couponType">
									<text class="dollar">¥</text>
									<text class="price">{{ util.formatFenMoney(item.discountAmt) }}</text>
								</block>
								<block v-if="'2' == item.couponType || '4' == item.couponType">
									<text class="price">{{ item.discountAmt }}</text>
									<text class="dollar">折</text>
								</block>
							</view>
							<text class="couponDetail">满{{ util.formatFenMoney(item.useCondAmt) }}可用</text>
						</view>
					</view>
					<view class="couponName">{{ item.couponName }}</view>
					<view class="couponPrice">
						<text class="pointTocoupons">{{ item.point }}积分</text>
					</view>
				</view>
			</view>
			<view class="building-wrap" v-if="util.isEmpty(offlineCoupon)">
				<image class="building-img" src="/static/image/home_ic_empty@2x.png"></image>
				<view class="building-tip">线下券上架中,敬请期待...</view>
			</view>
			<view v-if="!offlineCouppnHaveMore && !util.isEmpty(offlineCoupon)" class="haveMore">
				<view class="haveMore-line"></view>
				<view class="txt">没有更多了</view>
				<view class="haveMore-line"></view>
			</view>
		</view>
	</view>
</template>
<script module="util" lang="wxs" src="../../utils/util.wxs"></script>
<script>
	import loading from '@/components/loading/loading';
	import {
		baseImgUrl,
		baseUrl,
		staticBaseUrl
	} from '../../utils/constant.js';
	import {
		http
	} from '@/utils/commonRequest.js'; // 局部引入
	const util = require('../../utils/util.js');


	export default {
		components: {
			loading,
		},
		data() {
			return {		
				baseImgUrl: baseImgUrl,
				baseUrl: baseUrl,
				loading: 1, // 1加载中,0加载成功,-1加载失败
				exchangeType: '',
				page: {
					goods: 1,
					rights: 1,
					mallCoupon: 1,
					couponOffline: 1
				},
				listData: {},
				tabList: [
					{ text: '商品', value: 'goods', idx: 0 },
					{ text: '电子卡券', value: 'rights', idx: 1 },
					{ text: '商城券', value: 'mallCoupon', idx: 2 },
					// { text: '线下券', value: 'couponOffline', idx: 3 },
				],
				pointRangeList: [
					{ text: '我能兑换', idx: 1 },
					{ text: '5万分以下', idx: 2 },
					{ text: '5～10万分', idx: 3 },
					{ text: '10万分以上', idx: 4 },
				],
				haveMore: true, //是否还有更多数据加载
				tabIndex: 0,
				tabValue: 'goods',
				memberUserPoint: 0,
				exchangeGoodsList: [],
				rightsList: [],
				pointCouponsArr: [],
				offlineCoupon: [],		
				pointGoodHaveMore: true,
				ECouponsHaveMore: true,
				pointCouppnHaveMore: true,
				offlineCouppnHaveMore: true,
				couponlogo: staticBaseUrl + '/static/subPackages/pointMallPkg/images/couponlogo.png',
			}
		},
		onLoad(options) {
			let type = options && options.type;
			this.exchangeType = type;
			this.$checkAuth().then(res => {
				console.log('===00==',res)
				this.loadData();
			})
		},
		onReachBottom: function() {
			console.log('0000',this.tabValue)
			let pageType = this.pointGoodHaveMore;
			if(this.tabValue == 'rights'){
				pageType = this.ECouponsHaveMore;
			}
			if(this.tabValue == 'mallCoupon'){
				pageType = this.pointCouppnHaveMore;
			}
			if(this.tabValue == 'couponOffline'){
				pageType = this.offlineCouppnHaveMore;
			}
			if (!pageType) {
			 	return;
			}
			this.page[this.tabValue]++;
			this.loadData();
		},
		methods: {
			loadData: function() {
				let that = this;	
				let params = {
					type: this.tabValue,      												  
					page: this.page[this.tabValue],
					limit: '10'
				}
				if(this.exchangeType == 1){
					params.startPoint = '';
					params.endPoint = '';
				}else if(this.exchangeType == 2){
					params.startPoint = '0';
					params.endPoint = '50000';
				}else if(this.exchangeType == 3){
					params.startPoint = '50000';
					params.endPoint = '100000';
				}else if(this.exchangeType == 4){
					params.startPoint = '100000';
					params.endPoint = '';
				}
				
				http.get('/mtBank/getByPointExchangeList', {params: params})
				.then((res) => {
					res = res.data
					if ('200' == res.code) {
						console.log('-----都在兑--11',res)
						that.loading = 0;
						that.memberUserPoint = res.memberUserPoint;
						if(res.goods){
							that.exchangeGoodsList = [...that.exchangeGoodsList, ...res.goods.list];
							that.pointGoodHaveMore = res.goods.hasNextPage;
						}
						if(res.rights){
							that.rightsList = [...that.rightsList, ...res.rights.list];
							that.ECouponsHaveMore = res.rights.hasNextPage;
							console.log('that.rightsList',that.rightsList)
						}
						if(res.mallCoupon){
							that.pointCouponsArr = [...that.pointCouponsArr, ...res.mallCoupon.list];
							that.pointCouppnHaveMore = res.mallCoupon.hasNextPage;
							console.log('that.pointCouponsArr',that.pointCouponsArr)
						}
						if(res.couponOffline){
							that.offlineCoupon = [...that.offlineCoupon, ...res.couponOffline.list];
							that.offlineCouppnHaveMore = res.couponOffline.hasNextPage;
						}				
						
					}
				})
				.catch((err) => {
					this.loading = -1;
					console.log('err===',err);
				});
			},

			// 到积分记录
			toRecord: function() {
				uni.navigateTo({
          url: '/pointsPkg/pages/pointsRecord/pointsRecord'
        });
			},

			//切换tab
			changeTab: function(e){
				let item = e.currentTarget.dataset.item;
				if(item.value == this.tabValue) return
				this.tabIndex = item.idx;
				this.tabValue = item.value;
				this.exchangeType = '1';
				if(this.tabValue == 'goods'){
					this.exchangeGoodsList = [];
				}
				if(this.tabValue == 'rights'){
					this.rightsList = [];
				}
				if(this.tabValue == 'mallCoupon'){
					this.pointCouponsArr = [];
				}
				if(this.tabValue == 'couponOffline'){
					this.offlineCoupon = [];
				}
				this.page[this.tabValue] = 1;
				this.loadData()
				
			},

			//切换积分范围
			changePoint: function(e){
				let item = e.currentTarget.dataset.item;			
				if(item.idx == this.exchangeType) return
				this.exchangeType = item.idx;
				this.page[this.tabValue] = 1;
				if(this.tabValue == 'goods'){
					this.exchangeGoodsList = [];
				}
				if(this.tabValue == 'rights'){
					this.rightsList = [];
				}
				if(this.tabValue == 'mallCoupon'){
					this.pointCouponsArr = [];
				}
				if(this.tabValue == 'couponOffline'){
					this.offlineCoupon = [];
				}
				this.loadData()
			},

			goPointCouponDetail: function(e) {
        let id = e.currentTarget.dataset.id;
        uni.navigateTo({
          url: '/subPackages/pointMallPkg/pages/pointToCouponDetail/pointToCouponDetail?id=' + id
        });
      },

      goPointGoodsDetail: function(e) {
        let id = e.currentTarget.dataset.id;
        uni.navigateTo({
          url: '/subPackages/pointMallPkg/pages/pointToGoodsDetail/pointToGoodsDetail?exchangeId=' + id
        });
      },

      goOfflineCouponDetail: function(e) {
        let couponId = e.currentTarget.dataset.couponid;
        let exchangeId = e.currentTarget.dataset.exchangeid;
        uni.navigateTo({
          url: '/pages/coupon/couponDetail/couponDetail?couponId=' + couponId + '&saleRuleId=' + exchangeId
        });
      },

      goECouponDetail: function(e) {
        let id = e.currentTarget.dataset.id;
        uni.navigateTo({
          url: '/subPackages/right/pages/profitsDetail/profitsDetail?id=' + id
        });
      },
		}
	}
</script>

<style>
	.main-view{
		padding: 16rpx 24rpx;
	}

	.point-item{
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background: #F4F4F4;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		padding: 0 12rpx;
		margin-right: 24rpx
	}

	.top-point{
		width: 100%;
		height: 126rpx;
		background: #FFFFFF;
		box-shadow: 0px 14rpx 34rpx 6rpx rgba(182,178,199,0.2);
		border-radius: 24rpx;
		padding: 20rpx 0 0 24rpx;
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.point-icon{
		width: 48rpx;
		height: 48rpx;
		margin-right: 30rpx;
	}

	.point-score{
		min-width: 170rpx;
		margin-right: 30rpx;
	}

	.score-text{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.score{
		font-size: 48rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		margin-top: 4rpx;
	}

	.tab-view{
		width: 100%;
		height: 212rpx;
		background: #FFFFFF;
		box-shadow: 0px 14rpx 34rpx 6rpx rgba(182,178,199,0.2);
		border-radius: 24rpx;
		padding: 40rpx 0 0 32rpx;
		margin-bottom: 40rpx;
	}

	.tab-point,
	.tab-title{
		display: flex;
		align-items: center;		
	}

	.tab-point{
		margin-top: 40rpx;
	}
	
	.title-item{
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		position: relative;
		margin-right: 48rpx;
	}

	.active-text{
		font-size: 36rpx;
		color: #000;
		position: relative;
    z-index: 1;
	}

	.tab-mark{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		height: 16rpx;
		background: linear-gradient(313deg, rgba(255,90,132,0) 0%, #ED1C24 100%);
	}

	.goods-list-view {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .goodslist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }

  .item {
    margin-bottom: 20rpx;
    width: 340rpx;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14rpx 34rpx 6rpx rgba(182, 178, 199, 0.2);
    border-radius: 16rpx;
    padding-bottom: 30rpx;
  }

  .goodsImage {
    width: 340rpx;
    height: 340rpx;
    border-radius: 16rpx 16rpx 0 0;
  }

	.goodsName,
  .couponName {
    width: 100%;
    line-height: 42rpx;
    font-size: 30rpx;
    font-weight: 600;
    text-align: left;
    color: #333333;
    padding: 0 16rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

	.goodsName {
    margin-top: 16rpx;
  }

  .goodsPrice,
  .couponPrice {
    margin-top: 10rpx;
    padding: 0 16rpx;
  }

  .xiahuaPrice {
    text-decoration: line-through;
    margin-left: 20rpx;
    color: #999999;
  }

	.pointToGoods,
  .pointTocoupons {
    font-size: 28rpx;
    text-align: left;
    line-height: 40rpx;
    height: 40rpx;
    color: #ff3b30;
  }

	.haveMore {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 8rpx 0 190rpx;
    text-align: center;
    margin-top: 30rpx;
  }

  .haveMore-line {
    width: 54rpx;
    height: 2rpx;
    border: 1rpx solid rgba(0, 0, 0, 0.06);
  }

  .haveMore .txt {
    position: relative;
    padding: 0 16rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #cccccc;
    line-height: 34rpx;
  }

	.building-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin: 0 auto;
    padding-top: 100rpx;
  }

  .building-img {
    width: 570rpx;
    height: 310rpx;
  }

  .building-tip {
    font-family: PingFangSC-Regular;
    font-size: 28rpx;
    color: #1e2432;
    text-align: center;
    margin-top: 20rpx;
  }

	.couponImage {
    width: 340rpx;
    height: 340rpx;
    background: #fff5f1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16rpx 16rpx 0 0;
  }

	.ECoupon-logoView {
    width: 340rpx;
    height: 340rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 16rpx 16rpx 0 0;
  }

  .ECoupon-img {
    width: 340rpx;
    height: 340rpx;
    border-radius: 16rpx 16rpx 0 0;
  }

	.couponDisCoupon {
    z-index: 1;
    width: 180rpx;
    height: 72rpx;
    text-align: left;
    margin-left: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .couponDisCoupon text {
    color: white;
    line-height: 83rpx;
    height: 72rpx;
  }

  .couponDisCoupon .price {
    height: 72rpx;
    line-height: 72rpx;
    font-size: 56rpx;
    color: white;
  }

	.couponlogo {
    position: absolute;
    z-index: 1;
    height: 170rpx;
    width: 276rpx;
  }

	.couponlogoView {
    height: 170rpx;
    width: 276rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

	.couponDetail {
    z-index: 1;
    color: white;
    margin-left: 20rpx;
    height: 28rpx;
    line-height: 28rpx;
    font-size: 20rpx;
    width: 180rpx;
    text-align: center;
  }
</style>
